<template>
  <div id="container">
    <div class="wrap">
      <div class="header">
        <img :src="require('@/assets/img/xiaoyu.webp')" @click="click" alt class="left" />
        <span class="center">设备检测</span>
      </div>
      <div class="content-wrap">
        <p class="content">开始检测后,记得开启相机和麦克风的访问权限哦！</p>
        <div class="content-img">
          <div class="content-img1">
            <img :src="require('@/assets/img/xiangji.webp')" alt class="camera" />
            <span class="camera-font">摄像头</span>
          </div>
          <div class="content-img2">
            <img :src="require('@/assets/img/microphone.webp')" alt class="microphone" />
            <span class="microphone-font">麦克风</span>
          </div>
          <div class="content-img3">
            <img :src="require('@/assets/img/loudspeaker.webp')" alt class="loudspeaker" />
            <span class="loudspeaker-font">麦克风</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <button class="start">开始检测</button>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();
    const click = () => {
      router.push("/home/mine");
    };
    return {
      router,
      click
    };
  }
};
</script>
<style lang="scss" scoped>
#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wrap {
  width: 375px;
  height: 507.5px;
  background: radial-gradient(circle, #0097fe, #56d6fb, #1bd0fe);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  width: 208px;
  height: 17px;
  margin-top: 33.5px;
  margin-left: 16px;
  margin-right: 151px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  width: 7px;
  height: 10.5px;
}
.center {
  font-size: 17px;
}
.content-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 324.15px;
  height: 379.15px;
  background: #ffffff;
  margin-top: 44.5px;
  border: 10px #1bd0fe solid;
  border-radius: 15px;
  -moz-box-shadow: 0 0 10px 10px #0097fe;
  -webkit-box-shadow: 0 0 10px 10px #0097fe;
  box-shadow: 0 0 10px 10px #0097fe;
}
.content {
  width: 238px;
  height: 39px;
  font-size: 17px;
  color: #666666;
  font-weight: 700;
  padding-top: 36.5px;
}
.content-img {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 18px;
}
.content-img1 {
  width: 161.15px;
  height: 53.2px;
  display: flex;
  justify-content: space-between;
  margin-left: 80px;
  margin-right: 82.5px;
}
.camera {
  width: 46.8px;
  height: 53.2px;
}
.camera-font {
  font-size: 17px;
  height: 53.2px;
  line-height: 53.2px;
  color: #bfc7d1;
}
.content-img2 {
  width: 161.15px;
  display: flex;
  justify-content: space-between;
  margin-left: 80px;
  margin-right: 82.5px;
  margin-top: 27.5px;
}
.microphone {
  width: 45.55px;
  height: 57.95px;
}
.microphone-font {
  font-size: 17px;
  height: 53.95px;
  line-height: 57.95px;
  color: #bfc7d1;
}
.content-img3 {
  width: 161.15px;
  display: flex;
  justify-content: space-between;
  margin-left: 84px;
  margin-right: 82.5px;
  margin-top: 30.5px;
}
.loudspeaker {
  width: 56px;
  height: 50px;
}
.loudspeaker-font {
  font-size: 17px;
  height: 50px;
  line-height: 50px;
  color: #bfc7d1;
}
.footer {
  width: 375px;
  height: 159.5px;
  background: #0097fe;
}
.start {
  width: 300px;
  height: 45px;
  margin-top: 37px;
  background-color: #56d6fb;
  color: #ffffff;
  border: none;
  border-radius: 22.5px;
  font-size: 17px;
}
</style>
